<template>
	<div :id="model.id" class="custom" :class="`terminal${terminal}`">
		<div v-if="layoutTypes.indexOf(model.data.layoutType) >= 0" class="row-layout">
			<div class="custom-layout content-layout" :style="{'height': `${model.data.layoutHeight}px`}">
				<ul class="clearfix" :class="[`layout${model.data.layoutType}`]" :style="{'height': `${model.data.layoutHeight}px`}">
					<li v-for="(item,index) of model.data.children" :key="index"
						:style="{
							'width': `${getItemValue(item.width)}%`,
							'height': `${getItemValue(item.height)}%`,
							'left': `${getItemValue(item.left)}%`,
							'top': `${getItemValue(item.top)}%`,
							'backgroundColor': item.bgColor,
							'backgroundImage': `url('${item.imageUrl}')`, 
							'backgroundRepeat': 'no-repeat',
							'backgroundSize': 'contain',
							'backgroundPosition': 'top',
						}">
						
						<div v-if="terminalContent.viewed">
							<div v-for="(element,index) in item.componentsData" :key="index" :class="[`item-${element.type}`]">
								<component :is="element.type" :terminal="terminal" :model="element"></component>
							</div>
						</div>
						
						<draggable v-else class="drag-area list-group h100" :list="item.componentsData" item-key="id" group="page-edit" @change="onPageChange">
							<template #item="{ element, index }" :key="index">
								<div class="list-group-item" @click.stop.prevent="selectComponent(element)"
									:class="[{'on': activeComponent.id == element.id}, `item-${element.type}`]">
									
									<component :is="element.type" :terminal="terminal" :model="element"></component>
									<div class="del-btn">
										<span @click.stop.prevent="delComponent(element.id)"><i class="iconfont icon-shanchu"></i></span>
									</div>
								</div>
							</template>
						</draggable>
						
					</li>
				</ul>
			</div>
		</div>
		<div v-else class="box-layout" :style="{'height': `${model.data.layoutHeight}px`}">
			<div class="box-layout-inner">
				<div class="box-warp">
					<div class="custom-layout content-layout">
						<ul class="clearfix" 
							:class="[`layout${model.data.layoutType}`, `${activeComponent.id == model.id ? 'layout-active' : ''}`]" 
							:style="{'height': `${model.data.layoutHeight}px`}">
							<li v-for="(item,index) of model.data.children" :key="index"
								:style="{
									'width': `${getItemValue(item.width)}%`,
									'height': `${getItemValue(item.height)}%`,
									'left': `${getItemValue(item.left)}%`,
									'top': `${getItemValue(item.top)}%`,
									'backgroundColor': item.bgColor,
									'backgroundImage': `url('${item.imageUrl}')`, 
									'backgroundRepeat': 'no-repeat',
									'backgroundSize': 'contain',
									'backgroundPosition': 'top',
								}">
								
								<div v-if="terminalContent.viewed">
									<div v-for="(element,index) in item.componentsData" :key="index" :class="[`item-${element.type}`]">
										<component :is="element.type" :terminal="terminal" :model="element"></component>
									</div>
								</div>
								
								<draggable v-else class="drag-area list-group h100" :list="item.componentsData" item-key="id" group="page-edit" @change="onPageChange">
									<template #item="{ element }">
										<div class="list-group-item" @click.stop.prevent="selectComponent(element)"
											:class="[{'on': activeComponent.id == element.id}, `item-${element.type}`]">
											
											<component :is="element.type" :terminal="terminal" :model="element"></component>
											<div class="del-btn">
												<span @click.stop.prevent="delComponent(element.id)"><i class="iconfont icon-shanchu"></i></span>
											</div>
										</div>
									</template>
								</draggable>
								
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, onMounted, computed } from 'vue';
	import draggable from 'vuedraggable';
	import { useStore } from '/@/store/index';
	import { ElMessageBox } from 'element-plus';
	import { nanoid } from 'nanoid';
	
	//组件
	import Banner from '/@/views/decorator/components/leftBar/basics/banner.vue';
	import Text from '/@/views/decorator/components/leftBar/basics/text.vue';
	import Image from '/@/views/decorator/components/leftBar/basics/image.vue';
	import ImageText from '/@/views/decorator/components/leftBar/basics/imageText.vue';
	import ImageTextList from '/@/views/decorator/components/leftBar/basics/imageTextList.vue';
	import Division from '/@/views/decorator/components/leftBar/basics/division.vue';
	import Video from '/@/views/decorator/components/leftBar/basics/video.vue';
	
	import Pencil from '/@/views/decorator/components/leftBar/basics/pencil.vue';
	import Counter from '/@/views/decorator/components/leftBar/basics/counter.vue';
	import Checkbox from '/@/views/decorator/components/leftBar/basics/checkbox.vue';
	import Radiobox from '/@/views/decorator/components/leftBar/basics/radiobox.vue';
	import Selectbox from '/@/views/decorator/components/leftBar/basics/selectbox.vue';
	import Button from '/@/views/decorator/components/leftBar/basics/button.vue';
	
	export default {
		name: 'custom-basics',
		components: {
			draggable,
			Banner,
			Text,
			Image,
			ImageText,
			ImageTextList,
			Division,
			Video,
			Pencil,
			Counter,
			Checkbox,
			Radiobox,
			Selectbox,
			Button,
		},
		props: {
			terminal: {
				type: Number,
				default: 1
			},
			model: {
				type: Object
			}
		},
		setup(props) {
			const store = useStore();
			const state = reactive({
				terminal: props.terminal,
				model: props.model,
				layoutTypes: ['L1', 'L2', 'L3', 'L4'],
			});
			
			state.terminal = computed(() => store.state.decorator.terminal);
			state.terminalContent = computed(() => store.state.decorator.terminalContent);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			state.componentsData = computed(() => store.state.decorator.componentsData);
			
			const setActiveComponent = (activeComponent) => {
				store.dispatch('decorator/setActiveComponent', activeComponent);
			};
			
			// 画布添加或者移动了组件
			const onPageChange = (e) => {
				if (e.added) {
					e.added.element.id = nanoid();
					setActiveComponent(e.added.element);
				}
				if (e.moved) {
					setActiveComponent(e.moved.element);
				}
			};
			
			// 选中组件
			const selectComponent = (item) => {
				setActiveComponent(item);
			}
			
			// 删除组件
			const delComponent = (id) => {
				if(state.terminalContent.confirm){
					ElMessageBox.confirm('确定删除吗？', '提示', {
						confirmButtonText: '删除',
						cancelButtonText: '取消',
						type: 'warning',
					}).then(() => {
						removeComponent(id);
					}).catch(() => {});
				}else{
					removeComponent(id);
				}
			}
			
			const removeComponent = (id) => {
				state.model.data.children.forEach(t => {
					const data = t.componentsData.filter(d => d.id == id)[0];
					const index = t.componentsData.indexOf(data);
					if(index > -1){
						t.componentsData.splice(index, 1);
					}
				});
				setActiveComponent({});
			}
			
			onMounted(() => {
				
			})
			
			// 计算生成格子百分比
			const getItemValue = (val) => {
				const density = parseInt(state.model.data.density);
				return (val === 0 || density === 0) ? 0 : (val / density * 10000 / 100.00);
			}
			
			return {
				getItemValue,
				onPageChange,
				selectComponent,
				delComponent,
				...toRefs(state),
			};
		},
	}
</script>

<style lang="scss" scoped>
	.custom {
		.box-layout {
			position: relative;

			.box-layout-inner {
				position: absolute;
				width: 100%;
				left: 0;
				top: 0;
			}

			.box-warp {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				/* overflow: hidden; */
			}
		}

		.custom-layout {
			position: relative;

			ul {
				display: flex;
				flex-wrap: wrap;
				position: relative;
				list-style: none;
				padding: 0;
				margin: 0;
			}

			li {
				.a-link{
					display: inline-flex;
				}
				.img {
					width: 100%;
					display: block;
				}
			}

			.layoutL1 li {
				flex: 0 0 100%;
			}

			.layoutL2 li {
				flex: 0 0 50%;
			}

			.layoutL3 li {
				flex: 0 0 33.3%;
			}

			.layoutL4 li {
				flex: 0 0 25%;
			}

			.layoutaverage {
				li {
					position: absolute;

					.img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		
		.content-layout {
			z-index: 3;
			min-height: 30px;
			:deep .sortable-chosen {
				.content-box {
					display: block;
					width: 100%;
					line-height: 30px;
					font-size: 14px;
					text-align: center;
					background-color: #66b1ff;
					color: #fff;
					i{
						margin-right: 5px;
					}
				}
			}
			
			ul{
				padding: 0;
				margin: 0;
			}
		
			.list-group {
				
			}
		
			.list-group-item {
				position: relative;
				cursor: move;
				
				&.item-assistDiv,
				&.item-notice,
				&.item-text {
					min-height: 0px;
				}
		
				.del-btn {
					display: none;
				}
		
				&:hover {
					&:after {
						content: '';
						position: absolute;
						width: 100%;
						height: 100%;
						left: 0;
						top: 0;
						border: 1px #409EFF dashed;
						z-index: 4;
					}
				}
		
				&.on {
					&:after {
						content: '';
						position: absolute;
						width: 100%;
						height: 100%;
						left: 0;
						top: 0;
						border: 1px #409EFF solid;
						z-index: 5;
					}
		
					.del-btn {
						display: block;
						position: absolute;
						right: -13px;
						top: 50%;
						margin-top: -13px;
						z-index: 6;
		
						span {
							display: block;
							width: 26px;
							height: 26px;
							line-height: 26px;
							text-align: center;
							color: #666;
							background-color: #fff;
							box-shadow: 0 0 2px rgba(51, 51, 51, 0.2);
							cursor: pointer;
						}
					}
				}
			}
			
			.layout-active {
				li {
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					border-bottom: 1px #409EFF dashed;
					border-right: 1px #409EFF dashed;
					z-index: 4;
				}
			}
		}
		
		.warp {
			padding: 0 10px;
			margin: 0 auto;
			max-width: 100%;
		}
		.flex-box {
			display: flex;
		}
	}
</style>
